<template>
	<view class="container">
		<view class="shops group bg-white"
			style="margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;">
			<view class="mt10" style="color: #000;width: 100%;">{{ order_no }} </view>
			<view class="list">
				<view class="one-product" style="margin-top: 20rpx;">
					<view class="d-f">
						<view class="cover_img" style="border: 1rpx solid #f8f8f8; border-radius: 10rpx;">
							<image :src="product.image.file_path" mode="aspectFit"></image>
						</view>
						<view class="info flex-1 p-0-20">
							<view class="d-b-s">
								<view class="flex-1">
									<view class="title f28 gray3">{{ product.product_name }}</view>
									<view class="describe mt20 f24" style="font-size: 22rpx;color: #B1B1B1;"
										v-if="product.spec_type==20">
										{{ product.product_attr }}
									</view>
									<view class="mt10" style="color: #B1B1B1;">数量：{{ product.total_num }}</view>
									<view class="mt10" style="color: #B1B1B1;">租期：{{ start_time }} - {{ end_time }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tis" style="background-color: #fff;">
			<view class="qz d-b-c ">
				<view class="mt10" style="color: #B1B1B1;width: 100%;">总租金：{{ bill_price }} </view>
			</view>
		</view>
		<view class="kongke"></view>
		<view class="group bg-white" style="color: #999;padding-top: 20rpx;">
			<view class="ww100">
				<view style="display: flex;justify-content: space-between;">
					<view class="mb20" style="font-size: 40rpx;color:#000;">申请续租</view>
					<view style="color: #B1B1B1;font-size: 40rpx;"></view>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view class="mb20" style="font-size: 32rpx;">开始时间</view>
					<view style="color: #B1B1B1;font-size: 32rpx;">{{end_time}}</view>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view class="mb20" style="font-size: 32rpx;">结束时间</view>
					<view class="" style="height: 100%;font-size: 32rpx;">
						<picker start="2025-01-01" mode="date" :value="date" @change="bindDateChange">
							<view class="uni-input">{{date}}</view>
						</picker>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view class="mb20" style="font-size: 32rpx;">预估每日租金</view>
					<view style="color: #B1B1B1;font-size: 32rpx;">￥{{money}}/天</view>
				</view>
			</view>
		</view>
		<view class="foot-btns">
			<!-- <view class="more-btn pr d-c-c">
				<view class="">
					续租总计：{{daysDiff == '' ? daysDiff : '--'}}
				</view>
				<view class="">
					(续租金额：{{moneyDiff == '' ? moneyDiff : '--'}})
				</view>
			</view> -->
			<view style="flex: 1" class="d-e-c d-r">
				<button class="theme-borderbtn" @click="fication()">提交申请</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				product: {},
				order_id: "",
				bill_price: "",
				start_time: "",
				end_time: "",
				order_no: "",
				date: '请选择结束日期',
				money: "",
				daysDiff:"",
				moneyDiff:""
			}
		},
		onLoad(e) {
			console.log(e, 'query')
			this.product = uni.getStorageSync('reletproduct');
			this.order_id = e.order_id;
			this.bill_price = e.bill_price;
			this.start_time = e.start_time;
			this.end_time = e.end_time;
			this.order_no = e.order_no;
			let self = this;
			self._post('product.product/getMoney', {
				product_sku_id: self.product.spec_sku_id
			}, function(res) {
				self.money = res.data
			});
		},
		onShow() {
			console.log('111query')
		},
		mounted() {
			console.log('222query')
		},
		methods: {
			fication() {
				let self = this;
				uni.showLoading({
					title: '正在处理'
				});
				self._post(
					'user.order/applyRelate', {
						order_id: self.order_id,
						start_time:self.end_time,
						end_time:self.date
					},
					function(res) {
						uni.hideLoading();
						uni.showToast({
							title: '操作成功',
							duration: 2000,
							icon: 'success'
						});
						uni.navigateBack({
							delta: 1
						});
					}
				);
			},
			formatStr(str, type) {
				return `${str.substring(0, type)}...`;
			},
			bindDateChange(e) {
				this.date = e.detail.value.replace(/\//g, '-')
			}
		}
	}
</script>

<style scoped lang="scss">
	.kongke {
		height: 12rpx;
		background-color: #F0F0F0;
	}

	.more-btn {
		// ”更多“文字按钮
		width: 100rpx;
		height: 100%;
		line-height: 50rpx;
		text-align: center;
		font-size: 24rpx;
		color: #999999;

		.more-btn-box {
			left: -30rpx;
			top: 0;
			transform: translateY(-100%);
			width: 100vw;
			height: 100vh;
		}
	}

	.yuanyin {
		text-align: center;
		margin-bottom: 20rpx;
		color: #A5A5A5;
		border-bottom: 1rpx solid #A5A5A5;
		padding: 23rpx;
	}

	.cover_img image {
		width: 180rpx;
		height: 180rpx;
	}

	.Choose {
		padding: 20rpx;
		background-color: #FFFFFF;

		.method {
			display: flex;
			padding: 10rpx 20rpx;
			color: #1296db;
			justify-content: space-between;
			font-size: 30rpx;
		}
	}

	.fxuankuang {
		padding: 20rpx 40rpx;
	}

	.anniuXq {
		display: flex;
		justify-content: center;

		button {
			width: 50%;
		}
	}

	.tis {
		margin: 0 20rpx;
		overflow: hidden;

		.tishi {
			font-size: 22rpx;
			color: DarkOrange;
			background-color: LightYellow;
			line-height: 35rpx;
		}
	}

	.total-box {
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #C3E6FC;
		border-radius: 50rpx;
		margin: 15rpx 30rpx;

		.biank {
			width: 300rpx;
			height: 80rpx;
			border: 1rpx;
			display: flex;
			flex-direction: row;

			image {
				height: 80rpx;
				width: 80rpx;
			}

			view {
				font-size: 20rpx;
				line-height: 80rpx;
				margin-left: 5rpx;
			}
		}
	}

	.qz {
		margin: 20rpx auto;
		width: 650rpx;
		height: 92rpx;
		// background: #EBFAF9;
		text-align: right;
		border-radius: 46rpx;
		padding: 0 42rpx;
		box-sizing: border-box;

		.biank3 {
			padding: 15rpx;

			image {
				width: 64rpx;
				height: 64rpx;
			}

			.cont {
				.sq1 {
					font-size: 24rpx;
					font-weight: 500;
					color: #151515;
					line-height: 24rpx;
				}

				.sq2 {
					font-size: 20rpx;
					font-weight: 400;
					color: #928f91;
					line-height: 20rpx;
				}
			}
		}
	}

	.order-express {
		background: #ffffff;
		margin: 0 20rpx;
		border-radius: 12rpx;
		margin-top: 20rpx;
	}

	.order-express .icon-box .iconfont {
		font-size: 50rpx;
	}

	.order-datail {
		padding-bottom: 90 rpx;
		background-color: #F2F2F2;
	}

	.order-datail .fight-users {
		margin: 0 auto;
	}

	.order-datail .fight-users .user-box {
		width: 80rpx;
		height: 80rpx;
		margin: 10rpx;
		border-radius: 50%;
		border: 1px dashed #cccccc;
	}

	.order-datail .fight-users {
		padding: 30rpx;
	}

	.order-datail .fight-users .user-box image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.order-datail .fight-users .user-box .leader {
		position: absolute;
		top: -20rpx;
		left: 50%;
		margin-left: -30rpx;
		width: 60rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		color: #ffffff;
		border-radius: 30rpx;
		border: 1px solid #ffffff;
		background: red;
	}

	.order-datail .fight-users .user-box.user-who {
		font-size: 50rpx;
		color: #999999;
	}

	.state-cont .countdown-datetime {
		margin-top: 16rpx;
	}

	.state-cont .countdown-datetime text {
		padding: 4rpx 8rpx;
		border-radius: 4rpx;
		// background: rgba(0, 0, 0, .4);
	}

	.icon-dianpu1 {
		margin-right: 15rpx;
	}

	.kefu {
		border-top: 1rpx solid #cacaca;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.kefu .icon-kefu2 {
		color: #1296db;
		margin-right: 8rpx;
	}

	.group {
		margin: 0 20rpx;
		margin-top: 20rpx;
		border-radius: 12rpx;
		margin-bottom: 10rpx;
	}

	.foot-btns {
		padding-bottom: 40rpx;
		height: 100rpx;
		justify-content: space-between;
	}

	.foot-btns button {
		color: #FFFFFF;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30rpx;
		// width: 200rpx;
		background-color: #1296db;
		padding: 0 0.1rem;
		box-sizing: border-box;
	}

	.table-item {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		padding: 26rpx;
		box-sizing: border-box;
	}

	.selectpicker {
		width: 400rpx;
		height: 65rpx;
		line-height: 65rpx;
		padding: 0 23rpx;
		box-sizing: border-box;
		border: 2rpx solid #BFBFBF;
		border-radius: 5rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #575757;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.selectpicker .jiantou {
		color: #575757;
		font-size: 22rpx;
	}

	.send_btn {
		width: 200rpx;
		margin: 0 auto;
	}

	.w120 {
		width: 120rpx;
	}

	.order-state {
		background: #e6f4f4;
		color: #02c9bb;
	}

	.items {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.btns {
			width: 128rpx;
			height: 50rpx;
			text-align: center;
			border-radius: 50rpx;
			background: #5bc5ba;
			line-height: 50rpx;
			color: #FFF;
		}

		.btns2 {
			width: 128rpx;
			height: 50rpx;
			text-align: center;
			border-radius: 50rpx;
			background: #999;
			line-height: 50rpx;
			color: #FFF;
		}

		.btns3 {
			width: 128rpx;
			height: 50rpx;
			text-align: center;
			border-radius: 50rpx;
			background: #53C21D;
			line-height: 50rpx;
			color: #FFF;
		}

		.btns4 {
			width: 100rpx;
			height: 50rpx;
			text-align: center;
			border-radius: 50rpx;
			background: #E45656;
			line-height: 50rpx;
			color: #FFF;
		}
	}

	.beizhu1 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-weight: bold;
		color: black;
		font-size: 34rpx;
	}
</style>